<template>
  <div class="salvation">
    <!-- 页面头部区域 -->
    <div class="salvation-header">
      <div class="header-content">
        <div class="ancient-title">超度与救赎</div>
        <div class="header-subtitle">阴曹地府 · 功德司管理中心</div>
      </div>
      <div class="header-decoration">
        <div class="decoration-line"></div>
        <div class="decoration-symbol">⚊</div>
        <div class="decoration-line"></div>
      </div>
    </div>

    <!-- 核心统计卡片 -->
    <div class="stats-section">
      <a-row :gutter="[20, 20]" class="stats-grid">
        <a-col :xs="24" :sm="12" :xl="6">
          <div class="stat-card transcendence-stat">
            <div class="stat-icon">
              <HeartOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">超度申请</div>
              <div class="stat-value">{{ statsData.transcendenceApplications?.toLocaleString() }}</div>
              <div class="stat-label">待处理</div>
            </div>
          </div>
        </a-col>

        <a-col :xs="24" :sm="12" :xl="6">
          <div class="stat-card merit-stat">
            <div class="stat-icon">
              <TrophyOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">功德转移</div>
              <div class="stat-value">{{ statsData.meritTransfers }}</div>
              <div class="stat-label">今日完成</div>
            </div>
          </div>
        </a-col>

        <a-col :xs="24" :sm="12" :xl="6">
          <div class="stat-card redemption-stat">
            <div class="stat-icon">
              <GiftOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">救赎计划</div>
              <div class="stat-value">{{ statsData.redemptionPlans }}</div>
              <div class="stat-label">进行中</div>
            </div>
          </div>
        </a-col>

        <a-col :xs="24" :sm="12" :xl="6">
          <div class="stat-card success-stat">
            <div class="stat-icon">
              <CheckCircleOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">成功救赎</div>
              <div class="stat-value">{{ statsData.successfulRedemptions }}</div>
              <div class="stat-label">本月完成</div>
            </div>
          </div>
        </a-col>
      </a-row>

      <!-- 第二行统计卡片 -->
      <a-row :gutter="[20, 20]" class="stats-grid" style="margin-top: 20px">
        <a-col :xs="24" :sm="12" :xl="6">
          <div class="stat-card ritual-stat">
            <div class="stat-icon">
              <FireOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">超度仪式</div>
              <div class="stat-value">{{ statsData.todayRituals }}</div>
              <div class="stat-label">今日举行</div>
            </div>
          </div>
        </a-col>

        <a-col :xs="24" :sm="12" :xl="6">
          <div class="stat-card merit-balance-stat">
            <div class="stat-icon">
              <CrownOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">功德池总额</div>
              <div class="stat-value">{{ statsData.totalMeritPool?.toLocaleString() }}</div>
              <div class="stat-label">可转移功德</div>
            </div>
          </div>
        </a-col>

        <a-col :xs="24" :sm="12" :xl="6">
          <div class="stat-card qualification-stat">
            <div class="stat-icon">
              <UserOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">资格审核</div>
              <div class="stat-value">{{ statsData.qualificationReviews }}</div>
              <div class="stat-label">待审核</div>
            </div>
          </div>
        </a-col>

        <a-col :xs="24" :sm="12" :xl="6">
          <div class="stat-card effectiveness-stat">
            <div class="stat-icon">
              <LineChartOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">超度成功率</div>
              <div class="stat-value">{{ statsData.transcendenceSuccessRate }}%</div>
              <div class="stat-label">本月平均</div>
            </div>
          </div>
        </a-col>
      </a-row>
    </div>

    <!-- 主要内容区域 -->
    <div class="main-content">
      <a-row :gutter="[32, 32]" class="content-grid">
        <!-- 功能模块导航 -->
        <a-col :xs="24" :lg="24">
          <div class="modules-section">
            <div class="section-header">
              <h3 class="section-title">
                <AppstoreOutlined class="section-icon" />
                功能模块
              </h3>
            </div>

            <a-row :gutter="[24, 24]" class="modules-grid">
              <!-- 超度申请管理 -->
              <a-col :xs="24" :sm="12" :lg="8">
                <div class="module-card transcendence-module" @click="navigateToModule('transcendence')">
                  <div class="module-header">
                    <div class="module-icon">
                      <HeartOutlined />
                    </div>
                    <div class="module-title">超度申请管理</div>
                  </div>
                  <div class="module-description">管理超度申请流程、资格审核、仪式安排和效果评估</div>
                  <div class="module-stats">
                    <div class="module-stat">
                      <span class="stat-label">待处理申请：</span>
                      <span class="stat-value">{{ moduleStats.transcendence.pending }}</span>
                    </div>
                    <div class="module-stat">
                      <span class="stat-label">今日仪式：</span>
                      <span class="stat-value">{{ moduleStats.transcendence.todayRituals }}</span>
                    </div>
                  </div>
                  <div class="module-actions">
                    <a-button type="primary" size="small">进入管理</a-button>
                  </div>
                </div>
              </a-col>

              <!-- 功德转移系统 -->
              <a-col :xs="24" :sm="12" :lg="8">
                <div class="module-card merit-module" @click="navigateToModule('merit')">
                  <div class="module-header">
                    <div class="module-icon">
                      <TrophyOutlined />
                    </div>
                    <div class="module-title">功德转移系统</div>
                  </div>
                  <div class="module-description">管理功德来源、转移规则、使用记录和余额查询</div>
                  <div class="module-stats">
                    <div class="module-stat">
                      <span class="stat-label">功德池总额：</span>
                      <span class="stat-value">{{ moduleStats.merit.totalPool?.toLocaleString() }}</span>
                    </div>
                    <div class="module-stat">
                      <span class="stat-label">今日转移：</span>
                      <span class="stat-value">{{ moduleStats.merit.todayTransfers }}</span>
                    </div>
                  </div>
                  <div class="module-actions">
                    <a-button type="primary" size="small">进入管理</a-button>
                  </div>
                </div>
              </a-col>

              <!-- 救赎计划管理 -->
              <a-col :xs="24" :sm="12" :lg="8">
                <div class="module-card redemption-module" @click="navigateToModule('redemption')">
                  <div class="module-header">
                    <div class="module-icon">
                      <GiftOutlined />
                    </div>
                    <div class="module-title">救赎计划管理</div>
                  </div>
                  <div class="module-description">管理救赎任务设置、进度跟踪、成功奖励和失败处理</div>
                  <div class="module-stats">
                    <div class="module-stat">
                      <span class="stat-label">进行中计划：</span>
                      <span class="stat-value">{{ moduleStats.redemption.activePlans }}</span>
                    </div>
                    <div class="module-stat">
                      <span class="stat-label">成功率：</span>
                      <span class="stat-value">{{ moduleStats.redemption.successRate }}%</span>
                    </div>
                  </div>
                  <div class="module-actions">
                    <a-button type="primary" size="small">进入管理</a-button>
                  </div>
                </div>
              </a-col>
            </a-row>
          </div>
        </a-col>
      </a-row>

      <!-- 快速操作和最近动态 -->
      <a-row :gutter="[32, 32]" class="content-grid" style="margin-top: 32px">
        <!-- 快速操作 -->
        <a-col :xs="24" :lg="12">
          <div class="section-wrapper">
            <div class="section-header">
              <h3 class="section-title">
                <ThunderboltOutlined class="section-icon" />
                快速操作
              </h3>
            </div>

            <div class="quick-actions">
              <div class="action-item" @click="quickAction('newApplication')">
                <div class="action-icon">
                  <PlusOutlined />
                </div>
                <div class="action-content">
                  <div class="action-title">新建超度申请</div>
                  <div class="action-description">为亡魂创建超度申请</div>
                </div>
                <div class="action-status">
                  <a-button type="primary" size="small">立即创建</a-button>
                </div>
              </div>

              <div class="action-item" @click="quickAction('meritTransfer')">
                <div class="action-icon">
                  <SwapOutlined />
                </div>
                <div class="action-content">
                  <div class="action-title">功德转移</div>
                  <div class="action-description">执行功德转移操作</div>
                </div>
                <div class="action-status">
                  <a-button type="primary" size="small">立即转移</a-button>
                </div>
              </div>

              <div class="action-item" @click="quickAction('redemptionTask')">
                <div class="action-icon">
                  <SettingOutlined />
                </div>
                <div class="action-content">
                  <div class="action-title">设置救赎任务</div>
                  <div class="action-description">为恶魂制定救赎计划</div>
                </div>
                <div class="action-status">
                  <a-button type="primary" size="small">立即设置</a-button>
                </div>
              </div>

              <div class="action-item" @click="quickAction('evaluation')">
                <div class="action-icon">
                  <FileSearchOutlined />
                </div>
                <div class="action-content">
                  <div class="action-title">效果评估</div>
                  <div class="action-description">评估超度救赎效果</div>
                </div>
                <div class="action-status">
                  <a-button type="primary" size="small">立即评估</a-button>
                </div>
              </div>

              <div class="action-item" @click="quickAction('ritualArrange')">
                <div class="action-icon">
                  <FireOutlined />
                </div>
                <div class="action-content">
                  <div class="action-title">安排仪式</div>
                  <div class="action-description">安排超度仪式时间地点</div>
                </div>
                <div class="action-status">
                  <a-button type="primary" size="small">立即安排</a-button>
                </div>
              </div>

              <div class="action-item" @click="quickAction('qualificationReview')">
                <div class="action-icon">
                  <CheckCircleOutlined />
                </div>
                <div class="action-content">
                  <div class="action-title">资格审核</div>
                  <div class="action-description">审核超度申请资格</div>
                </div>
                <div class="action-status">
                  <a-tag color="orange">{{ statsData.qualificationReviews }}待审</a-tag>
                </div>
              </div>

              <div class="action-item" @click="quickAction('meritBalance')">
                <div class="action-icon">
                  <CrownOutlined />
                </div>
                <div class="action-content">
                  <div class="action-title">功德余额查询</div>
                  <div class="action-description">查询账户功德余额详情</div>
                </div>
                <div class="action-status">
                  <a-button type="primary" size="small">立即查询</a-button>
                </div>
              </div>

              <div class="action-item" @click="quickAction('failureHandling')">
                <div class="action-icon">
                  <ExclamationCircleOutlined />
                </div>
                <div class="action-content">
                  <div class="action-title">失败处理</div>
                  <div class="action-description">处理救赎失败案例</div>
                </div>
                <div class="action-status">
                  <a-tag color="red">23待处理</a-tag>
                </div>
              </div>
            </div>
          </div>
        </a-col>

        <!-- 最近动态 -->
        <a-col :xs="24" :lg="12">
          <div class="section-wrapper">
            <div class="section-header">
              <h3 class="section-title">
                <ClockCircleOutlined class="section-icon" />
                最近动态
              </h3>
              <a-button type="link" class="section-action" @click="viewAllActivities">查看全部</a-button>
            </div>

            <div class="activity-list">
              <div v-for="activity in recentActivities" :key="activity.id" class="activity-item">
                <div class="activity-time">{{ activity.time }}</div>
                <div class="activity-content">
                  <div class="activity-title">{{ activity.title }}</div>
                  <div class="activity-description">{{ activity.description }}</div>
                </div>
                <div class="activity-status">
                  <a-tag :color="getActivityColor(activity.type)">{{ activity.status }}</a-tag>
                </div>
              </div>
            </div>

            <div class="activity-actions">
              <a-space>
                <a-button type="primary" ghost size="small" @click="refreshActivities">
                  <template #icon><SyncOutlined /></template>
                  刷新动态
                </a-button>
                <a-button type="primary" ghost size="small" @click="filterActivities">
                  <template #icon><FilterOutlined /></template>
                  筛选动态
                </a-button>
              </a-space>
            </div>
          </div>
        </a-col>
      </a-row>
    </div>

    <!-- 全部动态模态框 -->
    <a-modal v-model:open="showAllActivitiesModal" title="全部动态记录" width="900px" :footer="null">
      <div class="all-activities-content">
        <div class="activities-header">
          <a-space>
            <a-input-search v-model:value="activitySearchKeyword" placeholder="搜索动态内容" style="width: 250px" @search="searchActivities" />
            <a-select v-model:value="activityTypeFilter" placeholder="筛选类型" style="width: 120px" @change="filterActivitiesByType">
              <a-select-option value="">全部类型</a-select-option>
              <a-select-option value="transcendence">超度</a-select-option>
              <a-select-option value="merit">功德</a-select-option>
              <a-select-option value="redemption">救赎</a-select-option>
              <a-select-option value="ritual">仪式</a-select-option>
            </a-select>
            <a-date-picker v-model:value="activityDateFilter" placeholder="选择日期" @change="filterActivitiesByDate" />
          </a-space>
        </div>

        <div class="activities-list">
          <a-list :data-source="filteredAllActivities" :pagination="{ pageSize: 8, showSizeChanger: false }" item-layout="horizontal">
            <template #renderItem="{ item }">
              <a-list-item>
                <template #actions>
                  <a-button type="link" size="small" @click="viewActivityDetail(item)"> 详情 </a-button>
                </template>
                <a-list-item-meta>
                  <template #title>
                    <div class="activity-meta-title">
                      {{ item.title }}
                      <a-tag :color="getActivityColor(item.type)" size="small">{{ item.status }}</a-tag>
                    </div>
                  </template>
                  <template #description>
                    <div class="activity-meta-desc">
                      <div>{{ item.description }}</div>
                      <div class="activity-meta-time"><ClockCircleOutlined /> {{ item.fullTime }}</div>
                    </div>
                  </template>
                  <template #avatar>
                    <a-avatar :style="{ backgroundColor: getActivityColor(item.type) }">
                      <component :is="getActivityIcon(item.type)" />
                    </a-avatar>
                  </template>
                </a-list-item-meta>
              </a-list-item>
            </template>
          </a-list>
        </div>

        <div class="activities-actions">
          <a-space>
            <a-button type="primary" @click="exportActivities">
              <template #icon><DownloadOutlined /></template>
              导出记录
            </a-button>
            <a-button @click="clearActivityFilters">
              <template #icon><ClearOutlined /></template>
              清除筛选
            </a-button>
            <a-button @click="showAllActivitiesModal = false"> 关闭 </a-button>
          </a-space>
        </div>
      </div>
    </a-modal>

    <!-- 动态详情模态框 -->
    <a-modal v-model:open="showActivityDetailModal" title="动态详情" width="600px" :footer="null">
      <div class="activity-detail-content" v-if="selectedActivityDetail">
        <a-descriptions title="基本信息" :column="2" bordered size="small">
          <a-descriptions-item label="动态标题">{{ selectedActivityDetail.title }}</a-descriptions-item>
          <a-descriptions-item label="动态类型">
            <a-tag :color="getActivityColor(selectedActivityDetail.type)">
              {{ getActivityTypeText(selectedActivityDetail.type) }}
            </a-tag>
          </a-descriptions-item>
          <a-descriptions-item label="状态">{{ selectedActivityDetail.status }}</a-descriptions-item>
          <a-descriptions-item label="时间">{{ selectedActivityDetail.fullTime }}</a-descriptions-item>
          <a-descriptions-item label="处理人" v-if="selectedActivityDetail.handler">{{ selectedActivityDetail.handler }}</a-descriptions-item>
          <a-descriptions-item label="优先级" v-if="selectedActivityDetail.priority">
            <a-tag :color="getPriorityColor(selectedActivityDetail.priority)">
              {{ selectedActivityDetail.priority }}
            </a-tag>
          </a-descriptions-item>
        </a-descriptions>

        <a-divider>详细描述</a-divider>
        <div class="activity-detail-description">
          {{ selectedActivityDetail.description }}
        </div>

        <a-divider v-if="selectedActivityDetail.remarks">备注</a-divider>
        <div class="activity-detail-remarks" v-if="selectedActivityDetail.remarks">
          {{ selectedActivityDetail.remarks }}
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import {
  HeartOutlined,
  TrophyOutlined,
  GiftOutlined,
  CheckCircleOutlined,
  FireOutlined,
  CrownOutlined,
  UserOutlined,
  LineChartOutlined,
  AppstoreOutlined,
  ThunderboltOutlined,
  PlusOutlined,
  SwapOutlined,
  SettingOutlined,
  FileSearchOutlined,
  ClockCircleOutlined,
  ExclamationCircleOutlined,
  SyncOutlined,
  FilterOutlined,
  DownloadOutlined,
  ClearOutlined
} from '@ant-design/icons-vue'
import { message } from 'ant-design-vue'
import dayjs from 'dayjs'

const router = useRouter()

// 统计数据
const statsData = ref({
  transcendenceApplications: 48,
  meritTransfers: 23,
  redemptionPlans: 15,
  successfulRedemptions: 36,
  todayRituals: 8,
  totalMeritPool: 1586420,
  qualificationReviews: 12,
  transcendenceSuccessRate: 87.5
})

// 模块统计数据
const moduleStats = ref({
  transcendence: {
    pending: 48,
    todayRituals: 8
  },
  merit: {
    totalPool: 1586420,
    todayTransfers: 23
  },
  redemption: {
    activePlans: 15,
    successRate: 78.3
  }
})

// 最近动态
const recentActivities = ref([
  {
    id: 1,
    time: '10:30',
    title: '超度申请审核完成',
    description: '李某超度申请已通过审核，安排明日举行仪式',
    type: 'transcendence',
    status: '已完成'
  },
  {
    id: 2,
    time: '09:45',
    title: '功德转移成功',
    description: '王某家属为其转移功德500点',
    type: 'merit',
    status: '成功'
  },
  {
    id: 3,
    time: '09:20',
    title: '救赎任务完成',
    description: '张某完成善行任务，业力值提升',
    type: 'redemption',
    status: '完成'
  },
  {
    id: 4,
    time: '08:55',
    title: '超度仪式举行',
    description: '陈某超度仪式顺利完成，效果良好',
    type: 'ritual',
    status: '成功'
  },
  {
    id: 5,
    time: '08:30',
    title: '新增救赎计划',
    description: '为恶魂孙某制定三个月救赎计划',
    type: 'redemption',
    status: '进行中'
  }
])

// 全部动态管理
const showAllActivitiesModal = ref(false)
const showActivityDetailModal = ref(false)
const selectedActivityDetail = ref(null)
const activitySearchKeyword = ref('')
const activityTypeFilter = ref('')
const activityDateFilter = ref(null)
const filteredAllActivities = ref([])

// 完整的动态记录数据
const allActivities = ref([
  {
    id: 1,
    time: '10:30',
    fullTime: '2024-01-20 10:30:15',
    title: '超度申请审核完成',
    description: '李某超度申请已通过审核，安排明日举行仪式。申请人：李某，年龄：45岁，死因：意外事故。经过详细审核，符合超度条件，安排在明日上午举行超度仪式。',
    type: 'transcendence',
    status: '已完成',
    handler: '审核官张三',
    priority: '高',
    remarks: '需要准备特殊仪式用品，已通知相关人员。'
  },
  {
    id: 2,
    time: '09:45',
    fullTime: '2024-01-20 09:45:30',
    title: '功德转移成功',
    description: '王某家属为其转移功德500点。转移方：王某之子王小明，转移数量：500功德点，用途：帮助父亲减轻业力负担。',
    type: 'merit',
    status: '成功',
    handler: '功德官李四',
    priority: '中',
    remarks: '转移手续齐全，已完成记录。'
  },
  {
    id: 3,
    time: '09:20',
    fullTime: '2024-01-20 09:20:45',
    title: '救赎任务完成',
    description: '张某完成善行任务，业力值提升。任务类型：社区服务，完成度：95%，获得功德：200点。',
    type: 'redemption',
    status: '完成',
    handler: '救赎官王五',
    priority: '中',
    remarks: '表现优秀，可考虑提前进入下一阶段救赎。'
  },
  {
    id: 4,
    time: '08:55',
    fullTime: '2024-01-20 08:55:20',
    title: '超度仪式举行',
    description: '陈某超度仪式顺利完成，效果良好。仪式时长：3小时，参与人员：5人，超度成功率：98%。',
    type: 'ritual',
    status: '成功',
    handler: '主持法师赵六',
    priority: '高',
    remarks: '仪式过程中出现祥瑞征象，超度效果极佳。'
  },
  {
    id: 5,
    time: '08:30',
    fullTime: '2024-01-20 08:30:10',
    title: '新增救赎计划',
    description: '为恶魂孙某制定三个月救赎计划。计划内容：社区服务、道德教育、心理疏导，预期功德提升：1000点。',
    type: 'redemption',
    status: '进行中',
    handler: '计划制定者刘七',
    priority: '中',
    remarks: '需要密切关注执行进度，定期评估效果。'
  },
  {
    id: 6,
    time: '08:15',
    fullTime: '2024-01-20 08:15:35',
    title: '资格审核驳回',
    description: '钱某超度申请因条件不符被驳回。驳回原因：业力过重，需要先进行救赎。建议制定救赎计划后重新申请。',
    type: 'transcendence',
    status: '已驳回',
    handler: '审核官张三',
    priority: '低',
    remarks: '已通知申请人家属，提供救赎指导建议。'
  },
  {
    id: 7,
    time: '08:00',
    fullTime: '2024-01-20 08:00:00',
    title: '功德池补充',
    description: '系统自动补充功德池10000点。来源：天庭奖励，用途：维持功德转移系统正常运行。',
    type: 'merit',
    status: '已完成',
    handler: '系统自动',
    priority: '低',
    remarks: '定期补充，确保功德池充足。'
  },
  {
    id: 8,
    time: '07:45',
    fullTime: '2024-01-20 07:45:25',
    title: '救赎失败处理',
    description: '周某救赎任务失败，制定处理方案。失败原因：任务执行不力，处理方案：重新制定救赎计划，延长救赎期限。',
    type: 'redemption',
    status: '处理中',
    handler: '救赎官王五',
    priority: '高',
    remarks: '需要加强监督和指导，确保下次成功。'
  }
])

// 初始化筛选数据
filteredAllActivities.value = allActivities.value

// 导航到功能模块
const navigateToModule = (module) => {
  switch (module) {
    case 'transcendence':
      router.push('/salvation/transcendence-application')
      break
    case 'merit':
      router.push('/salvation/merit-transfer')
      break
    case 'redemption':
      router.push('/salvation/redemption-plan')
      break
  }
}

// 快速操作
const quickAction = (action) => {
  switch (action) {
    case 'newApplication':
      // 跳转到超度申请流程页面
      router.push('/salvation/transcendence-application/process')
      break
    case 'meritTransfer':
      // 跳转到功德转移系统主页
      router.push('/salvation/merit-transfer')
      break
    case 'redemptionTask':
      // 跳转到救赎任务设置页面
      router.push('/salvation/redemption-plan/tasks')
      break
    case 'evaluation':
      // 跳转到超度效果评估页面
      router.push('/salvation/transcendence-application/evaluation')
      break
    case 'ritualArrange':
      // 跳转到超度仪式安排页面
      router.push('/salvation/transcendence-application/ritual')
      break
    case 'qualificationReview':
      // 跳转到申请资格审核页面
      router.push('/salvation/transcendence-application/qualification')
      break
    case 'meritBalance':
      // 跳转到功德余额查询页面
      router.push('/salvation/merit-transfer/balance')
      break
    case 'failureHandling':
      // 跳转到救赎失败处理页面
      router.push('/salvation/redemption-plan/failure')
      break
  }
}

// 查看全部动态
const viewAllActivities = () => {
  showAllActivitiesModal.value = true
  clearActivityFilters()
}

// 刷新动态
const refreshActivities = () => {
  // 模拟刷新数据
  message.success('动态数据已刷新')
  // 实际应用中重新从API获取数据
}

// 筛选动态
const filterActivities = () => {
  showAllActivitiesModal.value = true
}

// 搜索动态
const searchActivities = () => {
  applyActivityFilters()
}

// 按类型筛选动态
const filterActivitiesByType = () => {
  applyActivityFilters()
}

// 按日期筛选动态
const filterActivitiesByDate = () => {
  applyActivityFilters()
}

// 应用筛选条件
const applyActivityFilters = () => {
  let filtered = allActivities.value

  // 按关键词搜索
  if (activitySearchKeyword.value) {
    const keyword = activitySearchKeyword.value.toLowerCase()
    filtered = filtered.filter((item) => item.title.toLowerCase().includes(keyword) || item.description.toLowerCase().includes(keyword))
  }

  // 按类型筛选
  if (activityTypeFilter.value) {
    filtered = filtered.filter((item) => item.type === activityTypeFilter.value)
  }

  // 按日期筛选
  if (activityDateFilter.value) {
    const selectedDate = dayjs(activityDateFilter.value).format('YYYY-MM-DD')
    filtered = filtered.filter((item) => item.fullTime.startsWith(selectedDate))
  }

  filteredAllActivities.value = filtered
}

// 清除筛选条件
const clearActivityFilters = () => {
  activitySearchKeyword.value = ''
  activityTypeFilter.value = ''
  activityDateFilter.value = null
  filteredAllActivities.value = allActivities.value
}

// 查看动态详情
const viewActivityDetail = (activity) => {
  selectedActivityDetail.value = activity
  showActivityDetailModal.value = true
}

// 导出动态记录
const exportActivities = () => {
  message.success('动态记录导出成功')
  // 实际应用中实现导出功能
}

// 获取动态类型图标
const getActivityIcon = (type) => {
  const icons = {
    transcendence: 'HeartOutlined',
    merit: 'TrophyOutlined',
    redemption: 'GiftOutlined',
    ritual: 'FireOutlined'
  }
  return icons[type] || 'ClockCircleOutlined'
}

// 获取动态类型文本
const getActivityTypeText = (type) => {
  const texts = {
    transcendence: '超度申请',
    merit: '功德转移',
    redemption: '救赎计划',
    ritual: '超度仪式'
  }
  return texts[type] || '其他'
}

// 获取优先级颜色
const getPriorityColor = (priority) => {
  const colors = {
    高: 'red',
    中: 'orange',
    低: 'green'
  }
  return colors[priority] || 'default'
}

// 获取活动状态颜色
const getActivityColor = (type) => {
  const colors = {
    transcendence: 'purple',
    merit: 'gold',
    redemption: 'green',
    ritual: 'blue'
  }
  return colors[type] || 'default'
}

onMounted(() => {
  // 页面加载时可以获取实时数据
  console.log('超度与救赎页面已加载')
})
</script>

<style lang="scss" scoped>
.salvation {
  padding: 24px;
  min-height: 100vh;
  color: #fff;

  // 页面头部
  .salvation-header {
    margin-bottom: 32px;
    text-align: center;

    .header-content {
      .ancient-title {
        font-size: 2.5rem;
        font-weight: bold;
        background: linear-gradient(45deg, #ffd700, #ffeb3b, #ff9800);
        -webkit-background-clip: text;
        background-clip: text;
        margin-bottom: 8px;
        text-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
      }

      .header-subtitle {
        font-size: 1.1rem;
        color: rgba(255, 255, 255, 0.8);
        letter-spacing: 2px;
      }
    }

    .header-decoration {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 16px;
      gap: 16px;

      .decoration-line {
        width: 100px;
        height: 1px;
        background: linear-gradient(90deg, transparent, #ffd700, transparent);
      }

      .decoration-symbol {
        font-size: 1.5rem;
        color: #ffd700;
      }
    }
  }

  // 统计卡片区域
  .stats-section {
    margin-bottom: 32px;

    .stat-card {
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 12px;
      padding: 24px;
      transition: all 0.3s ease;
      height: 120px;
      display: flex;
      align-items: center;
      gap: 16px;

      .stat-icon {
        font-size: 2.5rem;
        width: 60px;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.1);
      }

      .stat-content {
        flex: 1;

        .stat-title {
          font-size: 0.9rem;
          color: rgba(255, 255, 255, 0.8);
          margin-bottom: 8px;
        }

        .stat-value {
          font-size: 2rem;
          font-weight: bold;
          color: #fff;
          margin-bottom: 4px;
        }

        .stat-label {
          font-size: 0.8rem;
          color: rgba(255, 255, 255, 0.6);
        }
      }

      // 不同类型卡片的颜色
      &.transcendence-stat .stat-icon {
        color: #e91e63;
      }
      &.merit-stat .stat-icon {
        color: #ffd700;
      }
      &.redemption-stat .stat-icon {
        color: #4caf50;
      }
      &.success-stat .stat-icon {
        color: #2196f3;
      }
      &.ritual-stat .stat-icon {
        color: #ff5722;
      }
      &.merit-balance-stat .stat-icon {
        color: #9c27b0;
      }
      &.qualification-stat .stat-icon {
        color: #607d8b;
      }
      &.effectiveness-stat .stat-icon {
        color: #00bcd4;
      }
    }
  }

  // 主要内容区域
  .main-content {
    .section-wrapper {
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 12px;
      padding: 24px;

      .section-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 24px;
        padding-bottom: 12px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);

        .section-title {
          display: flex;
          align-items: center;
          gap: 8px;
          margin: 0;
          font-size: 1.2rem;
          color: #fff;

          .section-icon {
            color: #ffd700;
          }
        }

        .section-action {
          color: #ffd700;
        }
      }
    }

    // 功能模块
    .modules-section {
      .modules-grid {
        .module-card {
          background: rgba(255, 255, 255, 0.08);
          border: 1px solid rgba(255, 255, 255, 0.15);
          border-radius: 12px;
          padding: 24px;
          cursor: pointer;
          transition: all 0.3s ease;
          height: 100%;

          .module-header {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 16px;

            .module-icon {
              font-size: 2rem;
              width: 50px;
              height: 50px;
              display: flex;
              align-items: center;
              justify-content: center;
              border-radius: 8px;
              background: rgba(255, 255, 255, 0.1);
            }

            .module-title {
              font-size: 1.3rem;
              font-weight: bold;
              color: #fff;
            }
          }

          .module-description {
            color: rgba(255, 255, 255, 0.8);
            font-size: 0.9rem;
            line-height: 1.5;
            margin-bottom: 16px;
          }

          .module-stats {
            margin-bottom: 16px;

            .module-stat {
              display: flex;
              justify-content: space-between;
              margin-bottom: 8px;
              font-size: 0.9rem;

              .stat-label {
                color: rgba(255, 255, 255, 0.7);
              }

              .stat-value {
                color: #ffd700;
                font-weight: bold;
              }
            }
          }

          .module-actions {
            text-align: right;
          }

          // 不同模块的图标颜色
          &.transcendence-module .module-icon {
            color: #e91e63;
          }
          &.merit-module .module-icon {
            color: #ffd700;
          }
          &.redemption-module .module-icon {
            color: #4caf50;
          }
        }
      }
    }

    // 快速操作
    .quick-actions {
      .action-item {
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 16px;
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.3s ease;
        margin-bottom: 12px;

        &:hover {
          background: rgba(255, 255, 255, 0.1);
        }

        .action-icon {
          width: 40px;
          height: 40px;
          display: flex;
          align-items: center;
          justify-content: center;
          background: rgba(255, 215, 0, 0.2);
          border-radius: 8px;
          color: #ffd700;
          font-size: 1.2rem;
        }

        .action-content {
          flex: 1;

          .action-title {
            font-weight: bold;
            color: #fff;
            margin-bottom: 4px;
          }

          .action-description {
            font-size: 0.8rem;
            color: rgba(255, 255, 255, 0.7);
          }
        }

        .action-status {
          text-align: right;
          min-width: 100px;
        }
      }
    }

    // 最近动态
    .activity-list {
      .activity-item {
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 12px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);

        &:last-child {
          border-bottom: none;
        }

        .activity-time {
          color: #ffd700;
          font-size: 0.9rem;
          font-weight: bold;
          min-width: 50px;
        }

        .activity-content {
          flex: 1;

          .activity-title {
            font-weight: bold;
            color: #fff;
            margin-bottom: 4px;
          }

          .activity-description {
            font-size: 0.8rem;
            color: rgba(255, 255, 255, 0.7);
          }
        }

        .activity-status {
          min-width: 80px;
          text-align: right;
        }
      }
    }

    .activity-actions {
      margin-top: 20px;
      text-align: right;
    }
  }

  // 全部动态模态框样式
  :deep(.all-activities-content) {
    .activities-header {
      margin-bottom: 20px;
      padding-bottom: 16px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);

      .ant-input-search,
      .ant-select,
      .ant-picker {
        .ant-input,
        .ant-select-selector,
        .ant-picker-input {
          background: rgba(255, 255, 255, 0.8);
          border: 1px solid rgba(255, 215, 0, 0.3);
          color: #1a1a2e;

          &:hover {
            border-color: #ffd700;
          }

          &:focus {
            border-color: #ffd700;
            box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.2);
          }
        }
      }
    }

    .activities-list {
      .ant-list-item {
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        padding: 16px 0;

        .activity-meta-title {
          display: flex;
          align-items: center;
          justify-content: space-between;
          color: #1a1a2e;
          font-weight: 600;
        }

        .activity-meta-desc {
          color: rgba(26, 26, 46, 0.8);

          .activity-meta-time {
            display: flex;
            align-items: center;
            gap: 4px;
            margin-top: 8px;
            color: rgba(26, 26, 46, 0.6);
            font-size: 12px;

            .anticon {
              color: #ffd700;
            }
          }
        }
      }
    }

    .activities-actions {
      margin-top: 20px;
      text-align: right;
      padding-top: 16px;
      border-top: 1px solid rgba(255, 255, 255, 0.1);
    }
  }

  // 动态详情模态框样式
  :deep(.activity-detail-content) {
    .ant-descriptions {
      .ant-descriptions-item-label {
        color: #1a1a2e;
        font-weight: 500;
      }

      .ant-descriptions-item-content {
        color: #1a1a2e;
      }
    }

    .activity-detail-description,
    .activity-detail-remarks {
      color: #1a1a2e;
      line-height: 1.6;
      margin: 16px 0;
      padding: 12px;
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(255, 215, 0, 0.3);
      border-radius: 8px;
    }
  }

  // 模态框通用样式
  :deep(.ant-modal) {
    .ant-modal-content {
      background: rgba(255, 255, 255, 0.95);
      border-radius: 16px;
      border: 1px solid rgba(255, 255, 255, 0.2);
    }

    .ant-modal-header {
      background: transparent;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);

      .ant-modal-title {
        color: #1a1a2e;
        font-weight: 600;
        font-size: 18px;
      }
    }

    .ant-modal-body {
      background: transparent;
      color: #1a1a2e;
    }
  }
}
</style>
